<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户主页</title>
    <!-- 样式文件 -->
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/userHomePage.css">

    <!-- 先引入配置文件 -->
    <script src="/js/config.js"></script>
    <!-- 引入消息提示工具 -->
    <script src="/js/message.js"></script>
    <!-- 引入验证工具库 -->
    <script src="/js/validation.js"></script>
    <!-- 引入页面脚本 -->
    <script src="/js/home.js"></script>
</head>
<body>
<!-- 顶栏 -->

<div class="topbar">
    <div class="topbar-left">
        <h1 class="system-title">云借阅·图书管理系统</h1>
    </div>

    <div class="topbar-right">
        <img id="user-avatar" class="user-avatar" src="/images/default-avatar.png" alt="头像">
        <span id="username" class="username">加载中...</span>
        <button class="logout-btn">注销</button>
    </div>
</div>



<!-- 整条侧栏容器 -->
<div class="sidebar">

    <div class="radio-container">
        <input checked id="radio-recommend" name="radio" type="radio" />
        <label for="radio-recommend">新书推荐</label>

        <input id="radio-history" name="radio" type="radio" />
        <label for="radio-history">借阅历史</label>

        <input id="radio-current" name="radio" type="radio" />
        <label for="radio-current">当前借阅</label>

        <input id="radio-borrow" name="radio" type="radio" />
        <label for="radio-borrow">图书借阅</label>

        <input id="radio-personal" name="radio" type="radio" />
        <label for="radio-personal">个人中心</label>

        <input id="radio-collection" name="radio" type="radio" />
        <label for="radio-collection">我的收藏</label>

        <div class="glider-container">
            <div class="glider"></div>
        </div>
    </div>
</div>


<!--内容板块-->
<div class="content" id="main-content">
    <div class="card">
        <div class="book-cover-wrapper">
        <img src="/images/img.png" alt="书籍封面" class="book-cover">
        </div>
        <div class="book-info">
            <h3 class="book-title">沉默的巡游</h3>
            <p class="book-author">东野圭吾</p>
        </div>
    </div>

<!--    <div class="card">-->
<!--        <div class="book-cover-wrapper">-->
<!--            <img src="/images/img.png" alt="书籍封面" class="book-cover">-->
<!--        </div>-->
<!--        <div class="book-info">-->
<!--            <h3 class="book-title">沉默的巡游</h3>-->
<!--            <p class="book-author">东野圭吾</p>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="card">书籍 3</div>-->
<!--    <div class="card">书籍 4</div>-->
<!--    <div class="card">书籍 5</div>-->
<!--    <div class="card">书籍 6</div>-->
<!--    <div class="card">书籍 7</div>-->
<!--    <div class="card">书籍 8</div>-->
<!--    <div class="card">书籍 9</div>-->
<!--    <div class="card">书籍 10</div>-->
<!--    <div class="card">书籍 11</div>-->
<!--    <div class="card">书籍 12</div>-->
</div>

</body>
</html>
